<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Galéria</title>

		<link rel="stylesheet" href="css/style.css" />

		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/jquery.isotope.min.js"></script>

	</head>
	<body>
		<section id="content">
			<section id="options" class="clearfix combo-filters">
				<div class="option-combo color">
					<ul class="filter option-set clearfix " data-filter-group="color">
						<li>
							<a href="#filter-any" data-filter-value="" class=".selected">any</a>
						</li>
						<li>
							<a href="#filter-abstract" data-filter-value=".abstract">abstract</a>
						</li>
						<li>
							<a href="#filter-profil" data-filter-value=".profil">profil</a>
						</li>
						<li>
							<a href="#filter-taj" data-filter-value=".taj">taj</a>
						</li>

					</ul>
				</div>

				<div class="option-combo size">
					<ul class="filter option-set clearfix " data-filter-group="size">
						<li>
							<a href="#filter-size-any" data-filter-value="" class=".any">any</a>
						</li>
						<li>
							<a href="#filter-profile-akt" data-filter-value=".akt">akt</a>

						</li>
						<li>
							<a href="#filter-profile-sima" data-filter-value=".sima">sima</a>

						</li>

					</ul>
				</div>
			</section>
			<!-- #options -->
			<div id="container" class="clearfix">
				<div class="galeryimg abstract">
					<img class=".Gwt-Image" src="icon/abstract/1.jpg" />
				</div>
				<div class="galeryimg abstract">
					<img class=".Gwt-Image" src="icon/abstract/2.jpg" />
				</div>
				<div class="galeryimg abstract">
					<img class=".Gwt-Image" src="icon/abstract/3.jpg" />
				</div>
				<div class="galeryimg abstract">
					<img class=".Gwt-Image" src="icon/abstract/4.jpg" />
				</div>
				<div class="galeryimg abstract">
					<img class=".Gwt-Image" src="icon/abstract/5.jpg" />
				</div>

				<div class="galeryimg profil akt">
					<img class=".Gwt-Image" src="icon/profil/akt//1.jpg" />
				</div>
				<div class="galeryimg profil akt">
					<img class=".Gwt-Image"  src="icon/profil/akt//2.jpg" />
				</div>
				<div class="galeryimg profil akt">
					<a href="img/profil/akt/3.jpg"><img class=".Gwt-Image" src="icon/profil/akt//3.jpg" /></a>
				</div>
				<div class="galeryimg profil akt">
					<a href="img/profil/akt/4.jpg"><img class=".Gwt-Image" src="icon/profil/akt//4.jpg" /></a>
				</div>
				<div class="galeryimg profil sima">
					<a href="img/profil/sima/1.jpg"><img class=".Gwt-Image" src="icon/profil/sima//1.jpg" /></a>
				</div>
			</div>
			<!-- #container -->

			<script>
				$(function() {

					var $container = $('#container'), filters = {};

					$container.isotope({
						itemSelector : '.galeryimg',
						masonry : {
							columnWidth : 60
						}
					});

					// filter buttons
					$('.filter a').click(function() {
						var $this = $(this);
						// don't proceed if already selected
						if ($this.hasClass('selected')) {
							return;
						}

						var $optionSet = $this.parents('.option-set');
						// change selected class
						$optionSet.find('.selected').removeClass('selected');
						$this.addClass('selected');

						// store filter value in object
						// i.e. filters.color = 'red'
						var group = $optionSet.attr('data-filter-group');
						filters[group] = $this.attr('data-filter-value');
						// convert object into array
						var isoFilters = [];
						for (var prop in filters ) {
							isoFilters.push(filters[prop])
						}
						var selector = isoFilters.join('');
						$container.isotope({
							filter : selector
						});

						return false;
					});

				});
			</script>
		</section>
		<!-- #content -->
	</body>
</html>